<script setup>
import {ref} from "vue";
import {createRouter} from "vue-router";
import Message from "@/message/Message.vue";

let grade = 100
let time = ref(new Date());
let arr = ref([1,2,3,4])
let Students = [
  {id:1,name:'赵三金',studentid:'241301'},
  {id:2,name:'李宁',studentid:'241302'},
  {id:3,name:'吉林跑男',studentid:'241303'}
]

let inputValue = ref("张三")
const btnClick = ()=>{
  console.log(inputValue.value)
}
const addValue = () => {
  arr.value.push(inputValue.value)
}

setInterval(()=>{
  time.value = new Date()
},1000)
</script>
<template>
  <h1>Hello World</h1>
  <h1>你好</h1>
  <div>
    <p v-text="111"></p>
    <p v-html="222"></p>
    <p v-if="grade>90">优秀</p>
    <p v-for="(item,Index) in arr">{{item}}</p>
    <table border="1" cellpadding="10px" cellspacing="0">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>学号</th>
      </tr>
      <tr v-for="(item,index) in Students">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.studentid}}</td>
      </tr>
    </table>
  </div>
  <h3>请输入文本</h3>
  <input type="text" v-model="inputValue">
  输入的值为:{{inputValue}}
  <el-button type="warning" @click="btnClick">点我</el-button>
  <br>
  当前时间为:<span style="color: darkmagenta">{{time}}</span>
  <br>
  <el-button type="warning" @click="addValue">你干嘛啊啊啊哎呦</el-button>
  <br>
  <message page-value="二次元刀酱"></message>
</template>

<style scoped></style>
